<style lang="less">
	@import "../../assets/style/photo.less";
</style>
<style scoped>
	.task_takePhoto{
		padding:10px;
	}
	.task_takePhoto .img_boxs .img_pho {
		width: 23%;
		margin: 0 0 2% 2%;
		display: inline-block;
		text-align: left;
	}
</style>

<template>
	<div>
		<!-- 拍照 start-->
		<van-row>
			<van-col span="24" v-for="(item,index) in photoLists" :key="index" class="col_item">
				<div class="photo_item clearfix">
					<label :for="item.title"><em>*</em> {{item.title}}</label>
					
					<!-- showHide用于任务状态已完成时隐藏拍照按钮 -->
					<div v-show="showHide">
						<p class="photo_holder">请拍摄照片</p>
						<span class="img_box" v-if="!type">
	                        <input @change="addPhotos($event,index, item.title)" type="file" accept="image/*" class="kyc-passin">
	                        <img :src="photoImg" alt="" class="icon_allow" style="width:50px;float:left;">
	                    </span>
						<span class="img_box" v-if="type">
	                        <img @click="addPhotos($event,index,item.title)" :src="photoImg" alt="" class="icon_allow" style="width:50px;float:left;">
	                    </span>
	               </div>
				</div>
				<div class="appendPhoto task_takePhoto">
					<div class="img_boxs">
						<img
							v-if="item.photo && item.photo.length>0"
							v-for="(img,index) in item.photo"
							:src="img"
							:key="index"
							@touchstart="longtouch(img,index)"
							@touchend="longtouched(img,index)"
							@click="previewImg(item.photo,index)"
							class="img_pho" />
					</div>
				</div>
			</van-col>
		</van-row>
		<!-- 拍照 end-->
		</van-row>
	</div>
</template>

<script>
	import photoImg from '../../assets/img/changguixunshi/icon_allow.png';
	import testPhoto from '../../assets/img/test.jpg'
	import { fileData, callData, fileUrl } from '../../axios/axios'
	import { openCamera, getLocation } from '../../api/android'
	import {
		Row,
		Col,
		Dialog,
		Notify,
		Uploader,
		ImagePreview
	} from 'vant';
	export default {
		components: {
			[Row.name]: Row,
			[Col.name]: Col,
			[Notify.name]: Notify,
			[Uploader.name]: Uploader,
			[ImagePreview.name]: ImagePreview
		},
		data() {
			return {
				type: false,
				photoImg: photoImg,
				photoPathArr: [],
				photoJdwdArr: [],
				photoPrarms: {
					file: [],
					jdwd: []
				}
			}
		},
		props: {
			goRouter: {
				type: Object,
				default() {
					return {
						name: '',
						query: {}
					}
				}
			},

			photoLists: {
				type: Array,
				default() {
					return []
				}
			},
			title: {
				type: String,
				default() {
					return ''
				}
			},
			showHide: {
				type: Boolean,
				default: true
			}
		},
		methods: {
			// 是否是安卓
			isAndroid() {
				if(window.Cordova) this.type = true
				else this.type = false
			},
			// 隐患处理方式图片放大
			previewImg(img,index) {
				let imgArr = []
				imgArr = img
				if(imgArr.length != 0){
					ImagePreview({
						images: imgArr,
						startPosition: index
					})
				}
			},
			// 长按事件
			longtouch(item,index){
				let _this = this
				clearTimeout(this.Loop)
				this.Loop = setTimeout(function(){
					_this.deleteImg(item,index)
				},500);
				return false;
			},
			longtouched(){
				clearTimeout(this.Loop)
			},
			// 删除照片
			deleteImg(item,index){
				let _this = this
				Dialog.alert({
					showCancelButton: true,
					title: '删除照片提醒',
					message: "是否删除该照片，删除后将无法恢复！"
				}).then(() => {
					let newArr = []
					_this.photoLists[0].photo.forEach((items,indexs) => {
						if(items != item) newArr.push(items)
					})
					_this.photoLists[0].photo = newArr
					_this.$emit('deletePhotos', index, _this.photoLists[0].type)
					Notify({
						message: '删除成功',
						duration: 1000,
						background: '#ff4d4d'
					});
				});
			},
			// 点击拍照，调用父组件的addPhotos方法
			addPhotos(file, index) {
				let _this = this;
				if(window.Cordova) {
					getLocation(res => { // 先定位
						if(res.success) {
							openCamera(res1 => { // 再拍照
								if(res1.success) {
									let jwd = res.data
									_this.photoLists[index].photo.push(res1.data.image_path)
									_this.photoPathArr.push(res1.data.image_path)
									_this.photoJdwdArr.push(jwd)
									_this.photoPrarms.file = _this.photoPathArr
									_this.photoPrarms.jdwd = _this.photoJdwdArr
									_this.photoPrarms.pictureType = _this.photoLists[0].pictureType
									if(_this.photoLists[0].type) {
						    			_this.$emit('addPhotos', {[_this.photoLists[0].type]:_this.photoPrarms})
						    		} else {
						    			_this.$emit('addPhotos', _this.photoPrarms)// 兼容之前只拍一张照片
						    		}
								}
							})
						}
					})
				} else {
					let jwd = {
						lon: '00.000000',
						lat: '00.000000'
					}
					var reader = new FileReader();
					reader.readAsDataURL(file.target.files[0]);
					reader.onload = function(evt) {
						_this.photoLists[index].photo.push(evt.target.result)
					}
					_this.photoPathArr.push(file.target.files[0])
					_this.photoJdwdArr.push(jwd)
					_this.photoPrarms.file = _this.photoPathArr
					_this.photoPrarms.jdwd = _this.photoJdwdArr
					_this.photoPrarms.pictureType = _this.photoLists[0].pictureType
					if(_this.photoLists[0].type) {
		    			_this.$emit('addPhotos', {[_this.photoLists[0].type]:_this.photoPrarms})
		    		} else {
		    			_this.$emit('addPhotos', _this.photoPrarms)// 兼容之前只拍一张照片
		    		}
				}
			},
			// 第一次进来没拍照时
			displayPhoto() {
				let jwd = {
					lon: '00.000000',
					lat: '00.000000'
				}
				this.photoPrarms.jdwd = jwd
				this.photoPrarms.file = []
				//this.$emit('addPhotos', this.photoPrarms)
				if(this.photoLists[0].type) {
	    			this.$emit('addPhotos', {[this.photoLists[0].type]:this.photoPrarms})
	    		} else {
	    			this.$emit('addPhotos', this.photoPrarms)// 兼容之前只拍一张照片
	    		}
			}
		},
		mounted() {
			this.isAndroid();
			this.displayPhoto()
		}
	}
</script>